<template>
  <div>
    <el-button @click="addshow=true">添加</el-button>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      >

      <el-table-column
        prop="wolId"
        label="id编号"
        width="120">
      </el-table-column>

<!--      <template slot-scope="scope">{{ scope.row.date }}</template>-->

      <el-table-column
        prop="wolIp"
        label="IP地址"
        width="120">
      </el-table-column>
      <el-table-column
        prop="wolMac"
        label="MAC地址"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="wolPort"
        label="端口号"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="wolDescription"
        label="描述"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit( scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete( scope.row.wolId)">删除</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="handleStart( scope.row.wolId)">开机</el-button>
        </template>

      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total=total
      :current-page.sync="pageindex"
      @current-change="currentChange"
    >
    </el-pagination>


    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <span>{{msg}}</span>
      <span slot="footer" class="dialog-footer">
<!--    <el-button @click="centerDialogVisible = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>-->
  </span>
    </el-dialog>

    <el-dialog
      title="新增数据"
      :visible.sync="addshow"
      width="30%"
      center>
      <span> ip地址：<el-input v-model="addip" placeholder="格式：xxx.xx.xx.xx"></el-input></span>
      <span> mac地址：<el-input v-model="addmac" placeholder="格式：xx:xx:xx:xx:xx:xx"></el-input></span>
      <span> 端口号：<el-input v-model="addport" placeholder="格式：xx"></el-input></span>
      <span> 描述（备注）：<el-input v-model="adddescription" placeholder="能填尽量填"></el-input></span>
      <span slot="footer" class="dialog-footer">
         <el-button @click="addshow = false">取 消</el-button>
         <el-button type="primary" @click="  addwol">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="编辑数据"
      :visible.sync="editshow"
      width="30%"
      center>
      <span> ip地址：<el-input v-model="editip" placeholder="格式：xxx.xx.xx.xx"></el-input></span>
      <span> mac地址：<el-input v-model="editmac" placeholder="格式：xx:xx:xx:xx:xx:xx"></el-input></span>
      <span> 端口号：<el-input v-model="editport" placeholder="格式：xx"></el-input></span>
      <span> 描述（备注）：<el-input v-model="editdescription" placeholder="能填尽量填"></el-input></span>
      <span slot="footer" class="dialog-footer">
         <el-button @click="editshow = false">取 消</el-button>
         <el-button type="primary" @click="editwol">确 定</el-button>
  </span>
    </el-dialog>

  </div>

</template>

<script>
    import {get, post,deletes,put,baseURL} from '../util/axios.js'

    export default {
  name: 'HelloWorld',
  data () {
    return {
        tableData: [],
        total:0,
        pagesize:10,
        pageindex:1,
        msg:"大撒大撒",
        centerDialogVisible:false,
        editshow:false,
        addshow:false,
        addip:"",
        addmac:"",
        addport:"",
        adddescription:"无",
        editip:"",
        editmac:"",
        editport:"",
        editdescription:"无",
        tempid:0,
        // tempip:"",
        // tempmac:"",
        // tempport:"",
        // tempdescription:"无",


    }
  },
    methods:{
      addwol(){
          var pushdata = {
              "wolDescription": this.adddescription,
              "wolIp": this.addip,
              "wolMac": this.addmac,
              "wolPort": this.addport
          };
          post("/sq_wol/save",pushdata,"").then((redata)=>{
              console.log(redata);
              console.log(pushdata);
              if(redata.data.code==0){
                  // this.total=redata.data.data.total;
                  this.msg="添加成功";
                  this.addshow=false;
                  this.centerDialogVisible=true;

              }else{
                  this.msg="添加失败";
                  this.addshow=false;
                  this.centerDialogVisible=true;
              }
              this.initdata();
          });
      },
        editwol(){
            var pushdata = {
                "wolId": this.tempid,
                "wolDescription": this.editdescription,
                "wolIp": this.editip,
                "wolMac": this.editmac,
                "wolPort": this.editport
            };
            post("/sq_wol/update_by_id",pushdata,"").then((redata)=>{
                console.log(redata);
                console.log(pushdata);
                if(redata.data.code==0){
                    // this.total=redata.data.data.total;
                    this.msg="修改成功";
                    this.editshow=false;
                    this.centerDialogVisible=true;

                }else{
                    this.msg="修改失败";
                    this.editshow=false;
                    this.centerDialogVisible=true;
                }
                this.initdata();
            });

        },
        handleEdit(row){
            this.editshow=true;
            this.tempid=row.wolId;
            this.editdescription=row.wolDescription;
            this.editip=row.wolIp;
            this.editmac=row.wolMac;
            this.editport=row.wolPort;
            console.log(row)
        },
        handleDelete(id){
            var pushdata={
                "wolDescription": "",
                "wolId": id,
                "wolIp": "",
                "wolMac": "",
                "wolPort": ""
            };
            post("/sq_wol/delete_by_id",pushdata,"").then((redata)=>{
                if(redata.data.code==0){
                    this.total=redata.data.data.total;
                    this.msg="删除成功";
                    this.centerDialogVisible=true;
                }else{
                    this.msg="删除失败";
                    this.centerDialogVisible=true;
                }
                this.initdata();
            });
        },
        handleStart(id){
            var pushdata={"wol_id": id};
            post("/sq_wol/startBoot",pushdata,"").then((redata)=>{
                if(redata.data.code==0){
                    this.total=redata.data.data.total;
                    this.msg="启动成功";
                    this.centerDialogVisible=true;
                }else{
                    this.msg="启动失败";
                    this.centerDialogVisible=true;
                }
                this.initdata();
            });
        },
        currentChange(size){
            this.pageindex=size;
            this.initdata();
        },
        initdata(){
            console.log("初始化数据");
            var  pushdata= {"pageindex":this.pageindex,"pagesize":this.pagesize};
            post("/sq_wol/get_list_by_page",pushdata,"").then((redata)=>{
                console.log( "开始打印数据");
                console.log( redata.data);
                this.tableData=redata.data.data.records;
                this.total=redata.data.data.total;
            });
            // post("127.0.0.1:8080")
        }
  },
        mounted: function () {
            this.initdata();
        }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
